<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://shiro.apache.org/tags" prefix="shiro"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>权限列表</title>
<link href="${ctx}/statics/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${ctx}/statics/uimaker/easyui.css">
<link rel="stylesheet" type="text/css"
	href="${ctx}/statics/uimaker/icon.css">
<link rel="stylesheet" href="${ctx}/statics/css/providers1.css">
<link rel="stylesheet" href="${ctx}/statics/css/basic_info.css">
</head>
<body>
	<div class="container">
		<table id="dg" style="width: 100%; height: 529px"
			data-options="
                rownumbers:true,
                singleSelect:true,
                autoRowHeight:true,
                pagination:true,
                fitColumns:true,
                striped:false,
                checkOnSelect:true,
                selectOnCheck:true,
                collapsible:true,
                toolbar:'#tb',
                url:'${ctx}/resource/page',
				method:'post',
                pageSize:10">
			<thead>
				<tr>
					<th field="id" width="140" hidden="hidden">ID</th>
					<th field="name" width="100">权限名</th>
					<th field="permission" width="100">权限标识</th>
					<th field="url" width="112">权限路径</th>
				</tr>
			</thead>
		</table>
		<div id="tb" style="padding: 0 30px;">
			<div class="conditions">
				<span class="con-span">权限名 </span><input id="name"
					class="easyui-textbox" type="text" name="name"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <span
					class="con-span">权限标识 </span><input id="permission"
					class="easyui-textbox" type="text" name="permission"
					style="width: 166px; height: 30px; line-height: 30px;"></input><span
					class="con-span">权限路径</span><input id="url"
					class="easyui-textbox" type="text" name="url"
					style="width: 166px; height: 30px; line-height: 30px;"></input> <a
					href="javascript:doSearch();" class="easyui-linkbutton"
					iconCls="icon-search" data-options="selected:true">查询</a> <a
					href="javascript:resetSearch()" class="easyui-linkbutton"
					iconCls="icon-reload">重置</a>
			<div class="opt-buttons">
				<a href="#" class="easyui-linkbutton add-btn"
					data-options="selected:true">新增</a>
				<a href="#" class="easyui-linkbutton edit-btn"
					data-options="selected:true">编辑</a>
				<a href="#" class="easyui-linkbutton del-btn">删除</a>
			</div>
		</div>
	</div>
	</div>
	<div id="w" class="easyui-dialog" title="权限信息"
		data-options="modal:true,closed:true,buttons:'#dlg-buttons'"
		style="width: 700px; height: 400px; padding: 10px;">
		<div class="container">
			<div class="content">
				<div class="easyui-tabs1" style="width: 100%;">
					<div title="基本信息" data-options="closable:false" class="basic-info">
						<form id="form0" method="post">
							<input type="hidden" name="id"/>
							<table class="kv-table">
								<tbody>
									<tr>
										<td class="kv-label">权限名</td>
										<td class="kv-content"><input id="name" name="name"
											class="easyui-textbox" type="text" required="true"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
										<td class="kv-label">权限标识</td>
										<td class="kv-content"><input id="permission" name="permission"
											class="easyui-textbox businessSelect" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
									<tr>
										<td class="kv-label">权限路径</td>
										<td class="kv-content" colspan="3"><input id="url" name="url"
											class="easyui-textbox" type="text"
											style="width: 166px; height: 30px; line-height: 30px;"></input>
										</td>
									</tr>
								</tbody>
							</table>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div id="dlg-buttons">
		<a class="easyui-linkbutton" href="javascript:void(0)"
			onclick="javascript:doAdd()" style="width: 80px" data-options="selected:true">提交</a> <a
			class="easyui-linkbutton" href="javascript:void(0)"
			onclick="javascript:$('#w').dialog('close');" style="width: 80px">取消</a>
	</div>
	<script type="text/javascript" src="${ctx}/statics/js/jquery.js"></script>
	<script type="text/javascript"
		src="${ctx}/statics/js/jquery.easyui.min.js"></script>
	<script type="text/javascript"
		src="${ctx}/statics/js/easyui-lang-zh_CN.js"></script>

	<script type="text/javascript">
		$(function() {
			$('#dg').datagrid();
			
			$('.add-btn').on('click', function() {
				$('#w').form('clear');
        		$('#w').dialog('open').dialog('setTitle', '权限新增');
        	});
			
			$('.edit-btn').on('click', function() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$("#w").dialog('open').dialog('setTitle', '权限修改');
					$('#form0').form('load', row);
				} else {
					$.messager.alert('提示','请选择一条数据','info');
				}
			});
			
			$('.del-btn').on('click', function() {
				var row = $('#dg').datagrid('getSelected');
				if (row) {
					$.messager.confirm('提示', '确定删除吗？', function(r) {
						if (r) {
							$.post('${ctx}/resource/delete', {
								"id":row.id
							}, function(data){
								if (data.result == true) {
									doSearch();
									$.messager.show({
										title: '提示',
										msg: data.msg,
										timeout:5000,
										showType:'slide'
									});
								} else {
									$.messager.alert('错误',data.msg,'error');
								}
							}, 'json');
						}
					});
				} else {
					$.messager.alert('提示','请选择一条数据','info');
				}
			});
			<c:if test="${not empty successMessage}">
    		$.messager.show({
				title: '提示',
				msg: '${successMessage}',
				timeout:5000,
				showType:'slide'
			});
    	</c:if>
    	<c:if test="${not empty errorMessage}">
    		$.messager.alert('错误','${errorMessage}','error');
    	</c:if>
		});
    
    	var doAdd = function() {
    		// 1、拿表单里的所有待提交数据
    		// 2、表单校验（略）
    		// 3、ajax提交数据到服务器端
    		
    		$('#form0').form('submit',{
				url: '${ctx}/resource/save',
				onSubmit: function(){
					return $(this).form('validate');
				},
				success: function(data){
					$('#form0').form('clear');
					var data = eval('(' + data + ')');
					if (data.result == true) {
						$('#w').dialog('close');
						doSearch();
						$.messager.show({
							title: '提示',
							msg: data.msg,
							timeout:5000,
							showType:'slide'
						});
					} else {
						$.messager.alert('错误',data.msg,'error');
					}
				}
			});
    	}
    	
    	var doSearch = function() {
    		$('#dg').datagrid('load',{
    			"name":$('#name').textbox('getValue'),
    			"permission":$('#permission').textbox('getValue'),
    			"url":$('#url').textbox('getValue')
    		});
    	}
    	
    	var resetSearch = function() {
    		$('#name').textbox('setValue', '');
    		$('#permission').textbox('setValue', '');
    		$('#url').textbox('setValue', '')
    	}
        
    </script>
</body>
</html>